<script lang="ts">
  import { NavigationMenu } from '@ark-ui/svelte/navigation-menu'
</script>

<NavigationMenu.Root>
  <NavigationMenu.Context>
    {#snippet render(context)}
      <pre>Current Value: {context().value || 'none'}</pre>

      <NavigationMenu.List>
        <NavigationMenu.Item value="features">
          <NavigationMenu.Trigger>Features</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <NavigationMenu.Link href="#overview">Overview</NavigationMenu.Link>
            <NavigationMenu.Link href="#features">Features</NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item value="docs">
          <NavigationMenu.Trigger>Documentation</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <NavigationMenu.Link href="#introduction">Introduction</NavigationMenu.Link>
            <NavigationMenu.Link href="#installation">Installation</NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item value="about">
          <NavigationMenu.Link href="#about">About</NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    {/snippet}
  </NavigationMenu.Context>
</NavigationMenu.Root>
